﻿@{
    ViewBag.Title = "Kabin2";
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-2.1.0.js"></script>
    <script src="Scripts/XSockets.latest.js"></script>
    <script src="Scripts/XSockets.WebRTC.latest.js"></script>


    <script>
        $(function () {

            var conn;
            var rtc;
            var pc;
            var parameter;
            var currentContext;
            var localVideo = document.getElementById("localVideo");
            var remoteVideo = document.getElementById("remoteVideo");
            var pc_config = { "iceServers": [{ "url": "stun:stun.l.google.com:19302" }] };

            conn = new XSockets.WebSocket('ws://212.146.135.107:4502/CustomBroker');


            conn.on(XSockets.Events.open, function (clientInfo) {
                rtc = new XSockets.WebRTC(conn);
                pc = new RTCPeerConnection(pc_config);

                console.log('Conn', conn);
                console.log('Open', clientInfo);
                console.log('webRTC', rtc);



                //RTC BINDINGS!!
                rtc.bind(XSockets.WebRTC.Events.onContextCreated, function (ctx) {
                    console.log('OnContextCreated', ctx);
                    currentContext = ctx;

                    parameter = XSockets.Utils.getParameterByName("p");
                    console.log("parameter :", parameter);

                    if (parameter.length > 0) {
                        currentContext = parameter;
                    } else {
                        currentContext = ctx.Context;
                    }


                    $('#context').val(currentContext);
                    console.log('Context', currentContext);
                });
                rtc.bind(XSockets.WebRTC.Events.onContextChange, function (ctx) {
                    console.log('OnContextChange', ctx.Context);
                    currentContext = ctx;
                    $('#context').val(currentContext.Context);
                    console.log('Context', currentContext);
                });
                rtc.bind(XSockets.WebRTC.Events.onPeerConnectionStarted, function (peer) {
                    console.log('OnPeerConnectionStarted', peer);
                });
                rtc.bind(XSockets.WebRTC.Events.onPeerConnectionCreated, function (peer) {
                    console.log('OnPeerConnectionCreated', peer);
                });
                rtc.bind(XSockets.WebRTC.Events.onPeerConnectionLost, function (peer) {
                    console.log('OnPeerConnectionLost', peer);
                });
                rtc.bind(XSockets.WebRTC.Events.onlocalStream, function (stream) {
                    console.log("The local stream is avaliable, add it to a HTML5 Video element")
                    attachMediaStream(document.querySelector("#localVideo"), stream);
                });
                rtc.bind(XSockets.WebRTC.Events.onRemoteStream, function (event) {
                    console.log("Remote mediastream attached to:", event.StorageGuid);
                    console.log("Event:", event);
                    attachMediaStream(remoteVideo, event.stream);
                });
                //END OF RTC BINDINGS!!

            });

            conn.on(XSockets.Events.onError, function (err) {
                console.log('Error', err);
            });
            conn.on(XSockets.Events.close, function () {
                console.log('Closed');
            });

            //EVENTS
            $("#start").click(function () {
                rtc.getUserMedia({ "audio": true, "video": true }, function () {
                    console.log("Media OK!");
                    console.log('Context', currentContext);
                    rtc.changeContext(currentContext);
                });
            });

            //EVENTS
            $("#joinRoom").click(function () {
                currentContext = $("#txtRoom").val();
                $('#context').val(currentContext.Context);
            });
        });
    </script>
</head>
<body>

    <label>Room ID   : </label> <input id="context" type="text">   <br>
    <label>Join Room : </label> <input id="txtRoom" type="text">  <input type="button" id="joinRoom" name="joinRoom" value="joinRoom"> <br>
    <input type="button" id="start" name="start" value="start" />
    <video id="localVideo" autoplay></video>
    <video id="remoteVideo" autoplay></video>
</body>
</html>
